import Styles from './index.module.less';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import Taro from '@tarojs/taro';
import {connect} from 'react-redux';
import {getMonthDay,weekNumToText} from '../../util';

function index(props)
{

    const {style} = props;

    //用户选择的月份
    const [selectedMonth, setSelectedMonth] = useState(dayjs().month()+1);

    //预约未来多少个月份
    const [monthCount, setMonthCount] = useState(0);

    //预约月份所在年份
    const [selectedYear,setSelectedYear] = useState(dayjs().year());

    //下一月按钮状态
    const [nextMonthBtnStatus, setNextMonthBtnStatus] = useState(true);

    //上一月按钮状态
    const [lastMonthBtnStatus, setLastMonthBtnStatus] = useState(false);

    //最长可预约到未来的月份数量
    const {maxNextMonth} = props;

    const [dayArr,setDayArr] = useState([]);

    const currentYear = dayjs().year();
    const currentMonth = dayjs().month() + 1;
    const currentDay = dayjs().date();

    useEffect(()=>{
        Taro.removeStorageSync("selectedTime");
    },[selectedMonth])

    useEffect(()=>{
        Taro.setStorageSync("selectedYear",selectedYear);
        Taro.setStorageSync("selectedMonth",selectedMonth);

        //判断所选日期是否现是今年今月
        if(selectedYear == currentYear && selectedMonth == currentMonth){
            let lastDay = getMonthDay(currentYear,currentMonth);
            let currentMonthDayArr = [];
            for(let i=currentDay;i <= lastDay;i++ ){
                currentMonthDayArr.push({
                    week:weekNumToText(
                        dayjs(selectedYear+"/"+selectedMonth+"/"+i).day()
                    ),
                    day:i,
                    topStyle: i == currentDay ? {color:"#6A3E3E"}: {},
                    bottomStyle: i == currentDay ? {color:"#fff", backgroundColor:"#c9aaa8" } : {}
                });
            }
            
            Taro.setStorageSync("selectedDay",currentDay);
            setDayArr(currentMonthDayArr);
        }else{
            let lastDay = getMonthDay(selectedYear,selectedMonth);
            let selectedMonthDayArr = [];
            for(let i=1;i<=lastDay;i++){
                selectedMonthDayArr.push({
                    week:weekNumToText(
                        dayjs(selectedYear+"/"+selectedMonth+"/"+i).day()
                    ),
                    day:i,
                    topStyle: i == 1 ? {color:"#6A3E3E"}: {},
                    bottomStyle: i == 1 ? {color:"#fff", backgroundColor:"#c9aaa8" } : {}
                })
            }

            Taro.setStorageSync("selectedDay",1);
            setDayArr(selectedMonthDayArr);

        }

        props.sendSelectedMonth();
        props.sendSelectedDay();
        props.sendSelectedYear();

    },[selectedMonth,selectedYear])



    const nextMonth = () => {

        if(monthCount >= maxNextMonth){

            setNextMonthBtnStatus(false);

        }else{

            if(monthCount == (maxNextMonth-1)){
                setNextMonthBtnStatus(false);
            }

            if(monthCount <= 1){
                setLastMonthBtnStatus(true);
            }


            setMonthCount(monthCount+1);
            if(selectedMonth == 12){
                setSelectedYear(selectedYear+1);
                setSelectedMonth(1);
            }else{
                setSelectedMonth(selectedMonth+1);
            }

            
        }

        
    }

    const lastMonth = () => {
        if(monthCount > 0 ){
            setMonthCount(monthCount-1);
            if(selectedMonth == 1){
                setSelectedMonth(12);
                setSelectedYear(selectedYear-1);

            }else{
                setSelectedMonth(selectedMonth-1);
            }

            setNextMonthBtnStatus(true);
            if(monthCount == 1){
                setLastMonthBtnStatus(false);
            }

        }else{
            setLastMonthBtnStatus(false);
        }
    }

    const handleDayBtn = (day) => {
        Taro.setStorageSync('selectedDay', day);
        props.sendSelectedDay();
        let newDayArr = [];
        for(let i in dayArr){
            if(dayArr[i].day == day){
                newDayArr.push({
                    day: dayArr[i].day,
                    week: dayArr[i].week,
                    topStyle:{color:"#6A3E3E"},
                    bottomStyle:{color:"#fff", backgroundColor:"#c9aaa8"}
                }) 
            }else{
                newDayArr.push({
                    day: dayArr[i].day,
                    week: dayArr[i].week,
                    topStyle:{},
                    bottomStyle:{}
                })
            }
        }
        setDayArr(newDayArr);
        
    }

    return (
        <view style={style} class={Styles.dateSelector}>
            <view class={Styles.monthSelector}>
                <view class={Styles.lastMonth} onClick={()=>{
                    lastMonth();
                }}>
                    <view class={Styles.last} style={{borderRight: lastMonthBtnStatus ? "8px solid #c9aaa8" : "8px solid #c4c4c4"}} ></view>
                </view>

                <view class={Styles.selectedMonth}>{selectedMonth}月</view>

                <view class={Styles.nextMonth} onClick={()=>{
                    nextMonth();
                }}>
                    <view class={Styles.next} style={{borderLeft: nextMonthBtnStatus ? "8px solid #c9aaa8" : "8px solid #c4c4c4"}} ></view>
                </view>

            </view>

            <view class={Styles.daySelector}>
                {dayArr.map((item)=>{
                    return (
                        <view class={Styles.day} onClick={()=>{
                            handleDayBtn(item.day)
                        }}>
                            <view class={Styles.top_info} style={item.topStyle}>{item.week}</view>
                            <view class={Styles.bottom_info} style={item.bottomStyle}>{item.day}</view>
                        </view>
                    )
                })}
               
            </view>
        </view>
    )
}


const mapDispatchToProps = (dispatch) => {
    return {
        sendSelectedMonth:()=>{
            dispatch({
                type:"SELECTEDMONTH"
            })
        },
        sendSelectedDay:()=>{
            dispatch({
                type:"SELECTEDDAY"
            })
        },
        sendSelectedYear:()=>{
            dispatch({
                type:"SELECTEDYEAR"
            })
        }
    }
}

export default connect(null,mapDispatchToProps)(index);